<!--
 * @Author: qwlbwm 18370818801qwl./
 * @Date: 2023-09-06 11:10:21
 * @LastEditors: whereamazinghappen 306702547@qq.com
 * @LastEditTime: 2023-09-23 15:57:18
 * @FilePath: \checc-business-module-web-kgpt-dev\src\views\examineManage\components\LayoutAsideItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-menu-item
    v-if="
      hasOneShowingChild(item.children, item) && !onlyOneChild.children && !item.hidden
    "
    :index="item.path"
    @click="hanndleActiveIndex"
  >
    <!-- <svg-icon :icon-class="onlyOneChild.meta.icon" /> -->
    <template #title>
      <span class="aside-menu-title">{{ onlyOneChild.meta.title }}</span></template
    >
  </el-menu-item>
  <!-- 嵌套菜单 -->
  <el-submenu v-else-if="!item.hidden" :index="item.path">
    <!-- 有子级 -->
    <template #title>
      <!--  <svg-icon :icon-class="item.meta.icon" /> -->
      <router-link
        style="
          text-decoration: none;
          color: rgb(48, 49, 51);
          display: inline-block;
          width: 100%;
        "
        v-if="showRouterLink(item.path)"
        :to="item.path"
      >
        <span class="aside-menu-title">
          {{ item.meta.title }}
        </span>
      </router-link>
      <span class="aside-menu-title" v-else>{{ item.meta.title }}</span>
    </template>
    <div
      v-if="
        item.children[1]?.name == '机电设备' ? item.children.splice(1, 1) : item.children
      "
    >
      <sub-item :key="child.path" v-for="child of item.children" :item="child" />
    </div>
  </el-submenu>
</template>

<script lang="ts">
import { filter } from "lodash";
import { ObjectType } from "typings/interfaces";
import { computed, defineComponent, ref } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "subItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const onlyOneChild = ref<ObjectType>({});
    const hasOneShowingChild = (children: any = [], parent: ObjectType) => {
      const showingChildren = filter(children, (item: ObjectType) => {
        if (item.hidden) {
          return false;
        } else {
          onlyOneChild.value = item;
          return true;
        }
      });

      // 只有一个子路由，不显示父路由
      const arr = ["投后管理", "人员信息", "资产信息", "路面", "交安", "绿化"]; //子路由名称数组
      if (showingChildren.length === 1 && arr.includes(showingChildren[0].name)) {
        return true;
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        onlyOneChild.value = parent;
        return true;
      }

      return false;
    };
    const routerLinkList = ref<string[]>([
      "/examineManage/techExamine/zjExamine/standardIndexLibrary",
    ]);
    const showRouterLink = (path: string) => {
      return routerLinkList.value.includes(path);
    };
    const store = useStore();
    const activeIndex = computed(() => store.getters.menuActiveIndex);
    return {
      onlyOneChild,
      hasOneShowingChild,
      showRouterLink,
      activeIndex,
      hanndleActiveIndex: (e) => {
        store.commit("saveMenuActiveIndex", e.index);
      },
    };
  },
});
</script>
